<nav class="navbar-default navbar-static-side" role="navigation">
    <div class="sidebar-collapse">
        <ul side-navigation class="nav" id="side-menu">
            <li class="nav-header">
                <div class="profile-element">
                    <img alt="image" class="img-circle" src="{{main.userImage}}"/>
                <span class="clear">
                                <span class="block m-t-xs">
                                    <strong class="font-bold">{{main.currentUserData.userName}}</strong>
                             </span>
                                <span class="text-muted text-xs block">{{main.currentUserData.role}}</span>
                            </span>
                </div>
                <div class="logo-element">
                    <img alt="image" class="img-circle" src="{{main.userImageSmall}}"/>
                    <span class="clear"><span class="block m-t-xs">
                                    <strong class="font-bold">{{main.currentUserData.userName | limitTo: 5}}</strong>
                             </span></span>
                </div>

            </li>

            <li ng-class="{active: $state.includes('index')}">
                <a ui-sref="index.main"><i class="fa fa-home"></i> <span class="nav-label">Home</span></a>
            </li>

            <li ng-class="{active: $state.includes('profile')}">
                <a ui-sref="profile.user"><i class="fa fa-user"></i> <span class="nav-label">My Profile</span></a>
            </li>

            <li ng-class="{active: $state.includes('activity')}">
                <a ui-sref="inbox"><i class="fa fa-paper-plane"></i> <span class="nav-label">Activity</span><span
                        class="label label-warning pull-right"></span></a>
                <ul class="nav nav-second-level" ng-class="{in: $state.includes('activity')}" dropdown>
                    <li ui-sref-active="active"><a ui-sref="activity.groups">Groups</a></li>
                    <li ui-sref-active="active"><a ui-sref="activity.events2">Events</a></li>
                    <li ui-sref-active="active"><a ui-sref="activity.pollsv2">Polls</a></li>
                </ul>
            </li>

            <li ng-class="{active: $state.includes('create')}">
                <a ui-sref="inbox"><i class="fa fa-plus-square"></i> <span class="nav-label">Create Something</span></a>
                <ul class="nav nav-second-level" ng-class="{in: $state.includes('create')}">
                    <li ui-sref-active="active"><a ui-sref="create.group">Group</a></li>
                    <li ui-sref-active="active"><a ui-sref="create.event">Event</a></li>
                    <li ui-sref-active="active"><a ui-sref="create.poll">Poll</a></li>
                </ul>
            </li>
            <li ui-sref-active="index">
                <a ui-sref="index.group_add_content" ng-hide="'true'"></a>
            </li>
            <li ui-sref-active="index">
                <a ui-sref="index.group_view_content" ng-hide="'true'"></a>
            </li>
        </ul>

    </div>
</nav>